<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import { Form, Field, CellGroup } from 'vant';
import { useRouter } from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
let { proxy } = getCurrentInstance();
let _id=ref(null)
onMounted(() => {
    getData();
    _id.value = route.query.id;
})
const onClick = (type) => {
    console.log('点击类型：' + type);
}
const getData = () => {
    let url = 'https://eid.youerp.cn/api/ajax.ashx?oper=Web_GetReserveClient';
    let param = { page: 1, size: 15, text: '' };
    proxy.$api.getData(url, param).then((res) => {
        console.log(res);
        if (res.status == '1') {

        } else {

        }
    })
}
</script>
<template>
    <div class="main">
        <div class="iframe-box" @click="onClick('动画层')">
            <iframe src="https://mcda.youerp.cn/web/WebGame/index.html?v=1.0.0" style="width:100vw; height:87.6vh;">
                IE：你们都看我干吗，我现在也是支持的
            </iframe>
        </div>
        <div style="height: 89vh; pointer-events: none;" @click="onClick('浮层')"></div>
        <div class="scroll-box" @click="onClick('滚动层')">
            <div class="form-box" style="height: 165vh;">
                <h3 style="height: 2.5vh;"></h3>
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field name="switch" label="开关">
                            <template #input>
                                <van-switch v-model="checked" />
                            </template>
                        </van-field>
                        <van-field name="checkbox" label="复选框">
                            <template #input>
                                <van-checkbox v-model="checked" shape="square" />
                            </template>
                        </van-field>
                        <van-field name="checkboxGroup" label="复选框组">
                            <template #input>
                                <van-checkbox-group v-model="groupChecked" direction="horizontal">
                                    <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
                                    <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
                                </van-checkbox-group>
                            </template>
                        </van-field>
                        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                        <van-field name="checkbox" label="复选框">
                            <template #input>
                                <van-checkbox v-model="checked" shape="square" />
                            </template>
                        </van-field>
                        <van-field name="checkboxGroup" label="复选框组">
                            <template #input>
                                <van-checkbox-group v-model="groupChecked" direction="horizontal">
                                    <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
                                    <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
                                </van-checkbox-group>
                            </template>
                        </van-field>
                        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
.main {
    background-color: #ecebeb;
}

.iframe-box {
    width: 100vw;
    height: 87.6vh;
    position: fixed;
    top: 0;

    iframe {
        border: 0 none;
    }
}

.form-box {
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    z-index: 15;
}
</style>